<template>
  <dv-border-box-7 id="right-row-down-chart">
    <div class="right-row-down-tittle">安全生产标语</div>
    <div class="right-row-down-left-content">{{ LeftContentArr[index] }}</div>
    <div class="right-row-down-right-content">{{ RightContentArr[index] }}</div>
  </dv-border-box-7>
</template>

<script>
export default {
  name: "rightRowDownChart",
  data() {
    return {
      index: -1,
      LeftContentArr: [
        "确保安全生产",
        "工作为了生活好",
        "生命至高无上",
        "安全生产要牢记",
        "宁为安全操碎心",
        "安全第一齐齐抓",
        "生产计划预排好",
        "寒霜偏打无根草",
        "管理基础打得牢"
      ],
      RightContentArr: [
        "严禁违规操作",
        "安全为了活到老",
        "安全责任为天",
        "生命不能当儿戏",
        "不让事故害工人",
        "质量效率人人夸",
        "物控需求精算巧",
        "事故专找懒惰人",
        "安全大厦层层高"
      ],
    };
  },
  methods: {
    GetContent() {
      this.index = ++this.index % 9;
    },
  },
  mounted() {
    const { GetContent } = this;

    this.GetContent();

    setInterval(this.GetContent, 10*1000);
  },
};
</script>

<style lang="less">
#right-row-down-chart {
  width: 100%;
  height: 41%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;
  margin: 20px;
}
.right-row-down-tittle {
 font-size: 20px;
    display: flex;
    font-weight: bold;
    color: white;
    justify-content: center;
    align-items: center;

}
.right-row-down-left-content {
  float: left;
  writing-mode: tb-rl;
  font-size: 30px;
  color: #f00;
  font-weight: bold;
  margin: 15%;
  letter-spacing: 10px;
}
.right-row-down-right-content {
  float: right;
  writing-mode: tb-rl;
  font-size: 30px;
  color: #f00;
  font-weight: bold;
  margin: 15%;
  letter-spacing: 10px;
}
</style>
